<template>
    <div ref="main" style="width: 100%; height: 90%;"></div>
</template>
<script lang='js' setup>
import * as echarts from 'echarts';
import { ref, onMounted, onBeforeUnmount } from 'vue';
import Papa from 'papaparse';
import {useCurrentTypeStore} from '../store/cur_type.ts';

let current_type = useCurrentTypeStore();
console.log(current_type.cur_type);

let main = ref();
let option = {
    color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FFBF00'],
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            label: {
                backgroundColor: '#6a7985'
            }
        },
    },
    legend: {
        data: ['实时', '消息', '库表', '文件'],
        textStyle: {
            fontStyle: 'normal',
            color: 'white',
            fontSize: 17
        },
        selected: {
            '实时': false,
            '消息': false,
            '库表': false,
            '文件': true
        }
    },

    grid: {
        // tooltip:{
        //     trigger: 'item',
        //     // backgroundColor: 'rgba(0,0,250,0.2)'
        // }
    },
    xAxis: [
        {
            type: 'category',
            boundaryGap: false,
            data: [],
            axisLine: {
                lineStyle: {
                    color: 'white'
                }
            },
            axisLabel: {
                show: true,
                color: 'white',
                fontSize: 15

            }
        }
    ],
    yAxis: [
        {
            // 最大值
            max: 120,
            type: 'value',
            axisLine: {
                lineStyle: {
                    color: 'white'
                }
            },
            axisLabel: {
                show: true,
                color: 'white',
                fontSize: 15
            }
        }
    ],
    series: [
        {
            name: '实时',
            type: 'line',
            stack: 'Total',
            smooth: true,
            areaStyle: {},
            emphasis: {
                focus: 'series'
            },
            // markLine: {

            //     symbol: ['none', 'none'],
            //     label: {
            //         show: true,
            //         formatter: '预测线',
            //         color: 'white',
            //         fontSize: 17
            //     },
            //     data: [{ xAxis: '18:06:10' }]
            // },
            data: []
        },
        {
            name: '消息',
            type: 'line',
            stack: 'Total',
            smooth: true,
            areaStyle: {},
            emphasis: {
                focus: 'series'
            },
            data: []
        },
        {
            name: '库表',
            type: 'line',
            stack: 'Total',
            smooth: true,
            areaStyle: {},
            emphasis: {
                focus: 'series'
            },
            data: []
        },
        {
            name: '文件',
            type: 'line',
            stack: 'Total',
            smooth: true,
            areaStyle: {},
            emphasis: {
                focus: 'series'
            },
            data: []
        }
    ],
    animation: false,
}
let myChart;
let initChart = () => {
    myChart = echarts.init(main.value);
    myChart.setOption(option)
    // 处理 legend 点击事件
    myChart.on('legendselectchanged', function (obj) {
        console.log(obj.name);
        if(obj.name != current_type.cur_type){
            current_type.cur_type = obj.name;
        }
        console.log(current_type.cur_type);

        if (option.legend.selected[obj.name] == false) {
            for (var key in option.legend.selected) {
                if (key == obj.name) {
                    option.legend.selected[key] = true;
                } else {
                    option.legend.selected[key] = false;
                }
            }
            myChart.setOption(option);
        }
    })
}

// 定时器id
let intervalId = 0;

// 当前展示的第几组模拟数据
let skip = 0;

onMounted(() => {
    initChart();

    // 读取模拟数据的 csv 文件
    const readCSVFile = (filePath) => {
        if (!filePath) throw new Error('请输入正确的文件路径')
        const xhr = new window.XMLHttpRequest()
        xhr.open('GET', filePath, false)
        xhr.overrideMimeType('text/html;charset=GB2312')
        xhr.send(null)
        const { data } = Papa.parse(xhr.responseText, {
            header: true,
            preview: 1000, // 先暂时读取前 1000 行数据
        })
        return data
    }

    const csvData = readCSVFile('/isp.csv');

    // 更新图数据的函数
    const updateChart = () => {
        // 实时
        option.series[0].data = csvData.slice(skip, skip + 10).map((obj, index) => obj.realtime);
        // 消息
        option.series[1].data = csvData.slice(skip, skip + 10).map((obj, index) => obj.message);
        // 库表
        option.series[2].data = csvData.slice(skip, skip + 10).map((obj, index) => obj.table);
        // 文件
        option.series[3].data = csvData.slice(skip, skip + 10).map((obj, index) => obj.document);
        // 随机扰动
        // option.series[0].data[9] = Number(option.series[0].data[9]) + Math.random() * (1000 - 100) + 100
        // 预测准确率
        //option.series[1].data = csvData.slice(skip, skip + 10).map((obj, index) => obj.accuracy);
        // x 轴
        option.xAxis[0].data = csvData.slice(skip, skip + 10).map((obj, index) => obj.TM.split(' ')[1])
        // 预测线
        //option.series[0].markLine.data[0].xAxis = option.xAxis[0].data[8];

        myChart.setOption(option)
        skip++
    }

    // 第一次挂载时执行
    updateChart();

    // 定时器，以后每5分钟更新图数据
    intervalId = setInterval(updateChart, 300000);
})

// 销毁定时器
onBeforeUnmount(() => {
    clearInterval(intervalId);
});


</script>
<style scoped>
div {
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
}
</style>
